<template>
  <div>
    <div class="query-form">
      <el-form
        :inline="true"
        size="small"
        :model="dept"
        ref="dept"
        class="demo-form-inline"
      >
        <el-form-item label="部门名称" prop="deptName">
          <el-input
            v-model="dept.deptName"
            placeholder="请输入部门名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchDept">查询</el-button>
          <el-button @click="resetForm('dept')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="base-table">
      <div class="action">
        <el-button size="small" type="primary" @click="handleOpen"
          >创建</el-button
        >
      </div>
      <el-table
        size="mini"
        :data="deptList"
        style="width: 100%; margin-bottom: 20px"
        row-key="_id"
        :tree-props="{ children: 'children' }"
      >
        <el-table-column
          v-for="(item, index) in tableData"
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
        >
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="editDept(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="delDept(scope.row._id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 部门弹窗 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form
        :model="deptForm"
        :rules="rules"
        ref="deptForm"
        label-width="100px"
      >
        <el-form-item label="上级部门" prop="parentId">
          <el-cascader
            v-model="deptForm.parentId"
            :options="parentId"
            :props="{ checkStrictly: true, label: 'deptName', value: '_id' }"
            clearable
            placeholder="请选择上级部门"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="部门名称" prop="deptName">
          <el-input
            v-model="deptForm.deptName"
            autocomplete="off"
            placeholder="请输入部门名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="负责人" prop="userName">
          <el-select
            v-model="deptForm.userName"
            placeholder="请选择负责人"
            @change="handleChange"
          >
            <el-option
              v-for="item in usersList"
              :key="item._id"
              :label="item.userName"
              :value="`${item.userId}/${item.userName}/${item.userEmail}`"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="负责人邮箱" prop="userEmail">
          <el-input
            v-model="deptForm.userEmail"
            disabled
            autocomplete="off"
            placeholder="请输入负责人邮箱"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="operationDept">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment";
export default {
  data() {
    return {
      dept: {
        deptName: "",
      },
      deptForm: {
        action: "",
        parentId: [],
        deptName: "",
        userEmail: "",
        userId: "",
        userName: "",
      },
      parentId: [],
      dialogFormVisible: false,
      title: "",
      deptList: [],
      usersList: [],
      rules: {
        parentId: [
          { required: true, message: "请选择上级部门", trigger: "change" },
        ],
        deptName: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
        ],
        userName: [
          { required: true, message: "请选择负责人", trigger: "change" },
        ],
      },
      tableData: [
        {
          prop: "deptName",
          label: "部门名称",
          width: "",
        },
        {
          prop: "userName",
          label: "负责人",
          width: "",
        },
        {
          prop: "updateTime",
          label: "更新时间",
          width: "",
          formatter(row, column, value) {
            return moment
              .parseZone(value)
              .local()
              .format("YYYY-MM-DD HH:mm:ss");
          },
        },
        {
          prop: "createTime",
          label: "创建时间",
          width: "",
          formatter(row, column, value) {
            return moment
              .parseZone(value)
              .local()
              .format("YYYY-MM-DD HH:mm:ss");
          },
        },
      ],
    };
  },
  mounted() {
    this.getDeptList();
    this.getUsersAllList();
  },
  methods: {
    async getDeptList() {
      let res = await this.deptApi.getDeptList(this.dept);
      console.log(res);
      this.deptList = res;
      this.parentId = res;
    },
    async getUsersAllList() {
      let res = await this.deptApi.getUsersAllList();
      console.log(res);
      this.usersList = res;
    },
    searchDept() {
      this.getDeptList();
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getDeptList();
    },
    handleOpen() {
      this.dialogFormVisible = true;
      this.title = "部门新增";
      this.deptForm.action = "create";
    },
    // 选择负责人触发的方法
    handleChange(val) {
      //   console.log(val);
      let [userId, userName, userEmail] = val.split("/");
      //   console.log(userEmail);
      Object.assign(this.deptForm, { userId, userName, userEmail });
    },
    operationDept() {
      this.$refs["deptForm"].validate(async (valid) => {
        if (valid) {
          let res = await this.deptApi.operationDept(this.deptForm);
          console.log(res);
          this.$refs["deptForm"].resetFields();
          this.dialogFormVisible = false;
          this.$message.success({
            message: "创建成功",
            offset: 100,
          });
        } else {
          this.$message.error({
            message: "输入内容有误, 请重新输入",
            offset: 100,
          });
        }
      });
    },
    // 编辑
    editDept(row) {
      this.dialogFormVisible = true;
      this.title = "部门编辑";
      this.$nextTick(() => {
        Object.assign(this.deptForm, row);
      });
      this.deptForm.action = "edit";
    },
    delDept(id) {
      let res = this.deptApi.operationDept({ action: "delete", _id: id });
      this.$message.success({
        message: "删除成功",
        offset: 100,
      });
    },
  },
};
</script>

<style scoped >
</style>
